<template>
	<view class="u-page">
		<view class="header">
			<view class="nav-bar">
				<uni-nav-bar left-icon="back" @clickLeft="goback()" color="#ffffff" :border="border" statusBar="true"
					backgroundColor="transparent">
					<view slot="left" class="sitename">{{titleName}}</view>
				</uni-nav-bar>
			</view>
		</view>
		<view class="content">
			<view class="projectList" v-if="lists.length>0">
				<block v-for="(item, index) in lists" :key="item.id">
					<view class="lists" @click="project(item.id)">
						<view class="images">
							<image :src="item.slProjectByPid.pic" mode=""></image>
						</view>
						<view class="list_contnet">
							<view class="projecttitle">{{item.slProjectByPid.title}}</view>
							<view class="projectinfo"> {{item.slProjectByPid.contentInfo}}</view>
							<view class="tags">
					<!-- 			<block > -->
									<uni-tag v-for="(tag,index1) in item.slProjectByPid.tag" :key='index1' class="tag" :text="tag" size="small" type="primary" circle="true">
									</uni-tag>
								<!-- </block> -->
							</view>
						</view>

					</view>
				</block>
			</view>
			<view class="nodData" v-else>
				暂无数据
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "1",
				titleName: '我的收藏',
				userData: {},
				lists: [],
			}
		},
		onLoad(data) {

			if (data.type == 1) {
				this.type = "1"
				this.titleName = "我的收藏"
			} else if (data.type == 2) {
				this.type = '0'
				this.titleName = "我的浏览记录"
			}
			let user = uni.getStorageSync('userData');
			this.userData = user;
			this.project();
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			async project() {
				const collection = await this.GQL({
					"operationName": "allSlUserRecords",
					"query": "query allSlUserRecords($filter: SlUserRecordFilter,$orderBy: [SlUserRecordsOrderBy!] = [PRIMARY_KEY_ASC]) { allSlUserRecords(filter:$filter orderBy:$orderBy) { nodes { slProjectByPid { title contentInfo pic isDelete tag } } } }",
					"variables": {
						"filter": {
							"uid": {
								"equalTo": this.userData.uid
							},
							"type": {
								"equalTo": this.type
							}
						},
						"orderBy": "CREATE_TIME_DESC"
					}
				})
				if (collection.data.allSlUserRecords.nodes != '') {
					collection.data.allSlUserRecords.nodes.forEach(function(item, index) {
						if (item.slProjectByPid.tag) {
							item.slProjectByPid.tag = item.slProjectByPid.tag.split(',')
						}
					});
					this.lists = collection.data.allSlUserRecords.nodes
					console.log(this.lists.length)
				}
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		background-color: #FBFCFE;
	}

	.header {
		width: 100%;
		height: 200px;
		/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5);

		/* 标准的语法 */
		.nav-bar {
			.uni-navbar__header {
				padding-left: 15px;
			}

			.uni-navbar__header-btns-left {
				width: 150px;
			}

			.sitename {
				height: 50px;
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #FFFFFF;
			}
		}
	}

	.content {
		position: relative;
		top: -130px;
		margin: 15px;

		.projectList {
			background-color: #FFFFFF;
			border-radius: 5px;
			padding: 8px 16px;

			.lists {
				// padding-top:10px ;
				padding: 8px 0;
				margin: 0;
				display: flex;
				border-bottom: 1px solid #EEEEEE;

				.list_contnet {
					margin-left: 5px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.projecttitle {
						width: 100%;
						height: 16px;
						overflow: hidden;
						font-size: 15px;
						font-weight: 400;
						color: #161E3E;
						line-height: 16px;
					}

					.projectinfo {
						// margin: 10px 0px;
						font-size: 11px;
						font-weight: 400;
						color: #9BA7C1;
						line-height: 15px;
					}

					.tags {
						// font-size: 11px;
						// box-sizing: border-box;
						padding: 2px 0;
						.tag {
							margin-right: 5px;
						}
					}
				}
			}

			.images {
				display: flex;
				align-items: center;
			}

			image {
				border-radius: 6px;
				width: 90px;
				height: 90px;
			}
		}
	}

	.nodData {
		height: 60vh;
		// font-weight: 600;
		background-color: #FFFFFF;
		color: #aaaaaa;
		border-radius: 5px;
		box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
